<template>
  <div>

    <div class="tab">
      <el-button type="danger" @click="batchDelete" :disabled="btnStatus">批量删除</el-button>
      <el-table
        @selection-change="change"
        :data="tableData">
        <el-table-column
          fixed
          prop="articleId"
          label="ID"
          type="selection"
          width="150">
        </el-table-column>
        <el-table-column
          fixed
          label="标题"
          width="150">
          <template slot-scope="scope">
            <el-link type="primary" @click="routerArticleByTitle(scope.row.articleTitle)"> {{ scope.row.articleTitle }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="articleClassify"
          label="分类"
          width="120">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="修改时间"
          width="120">
        </el-table-column>
        <el-table-column
          prop="articleUsername"
          label="发布人"
          width="100  ">
        </el-table-column>
        <el-table-column
          prop="articleRanking"
          label="文章排行"
          width="80">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="routerArticleById(scope.row.articleId)">回退到草稿箱</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      <div class="block">-->
      <!--        <el-pagination-->
      <!--          @size-change="handleSizeChange"-->
      <!--          @current-change="handleCurrentChange"-->
      <!--          :current-page="currentPage"-->
      <!--          :page-sizes="[5, 10, 20, 30]"-->
      <!--          :page-size="pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="total">-->
      <!--        </el-pagination>-->
      <!--      </div>-->
    </div>

  </div>
</template>

<script>
import {
  batchDelete, checkUpdate, Delete,
  getArticleDraft,
  getArticleRecycle,
  getBlogInfoByTitle,
  searchArticleByTitleByContent
} from "../../request/reqManage";

export default {
  name: "BlogRecycle",
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      array: [],
      //默认按钮的状态不可用
      btnStatus: true,
      //搜索框内容
      value: '',
    }
  },
  methods: {
    /**
     * 分页查询
     * @param val
     */
    handleSizeChange(val) {


    },
    /**
     * 处理修改分页的事件
     * @param val
     */
    handleCurrentChange(val) {

      // this.$mr.articleList(val, this.pageSize).then(({data}) => {

      //   this.tableData = data.records
      // })

    },
    /**
     * 查询回收站数据
     */
    selectRecycle() {
      this.$mr.getArticleRecycle(this.$user).then((data) => {
        this.tableData = data.data
      })
    },
    /**
     * 删除方法
     * @param row
     */
    handleDelete(row) {

    },
    /**
     * 处理在未勾选文章的情况下不能点击批量删除
     * @param val
     */
    change(val) {
      this.array = []
      for (let i = 0; i < val.length; i++) {
        this.array.push(val[i].articleId)
      }

      if (val.length > 0) {
        this.btnStatus = false
      }
      if (val.length <= 0) {
        this.btnStatus = true
      }
      // if (this.array.length>0){
      //   this.btnStatus=false
      // } if (this.array.length===0){
      //   this.btnStatus=true
      // }
    },
    /**
     * 点击删除案件弹出一个友好提示框，显示删除成功或者失败
     */
    batchDelete() {
      this.$mr.Delete(this.array.join(',')).then(res => {

        if (res.code !== 200) {
          this.$message.error("删除失败")
          return
        }
        this.$message.success("删除成功")
        //删除之后在次查询文章内容
        this.selectRecycle()
      })
    },
    routerArticleById(val) {

      this.$mr.updateArticle(val).then((data) => {
        if (data.code !== 200) {
          this.$message.error("保存失败")
          return
        }

        this.$message.success("以保存到草稿箱")
        this.selectRecycle()
        // location.reload()
      })
    },
  },

  /**
   * 自动加载
   */
  created() {
    this.selectRecycle()
  }

}
</script>

<style scoped>
.tab {
  width: 65%;
  margin: auto;

}
</style>
